<template>
  <div>
    <div class="content-m">
      <el-row style="margin-top: 20px" :gutter="20">
        <el-col :span="17">
          <el-card>
            <h2>{{ itemDetail?.title }}</h2>
            <div style="padding: 10px 0">
              <el-tag type="success" v-if="route.query.type==='lost'">
                <el-icon>
                  <Search></Search>
                </el-icon>
                <el-text type="success">
                  寻物启事
                </el-text>
              </el-tag>
              <el-tag>丢失时间：{{ dateFormat(itemDetail?.lostTime) }}</el-tag>
              <el-text>
                <el-icon>
                  <Timer/>
                </el-icon>
                发布于{{ dateFormat(itemDetail?.createTime) }}
              </el-text>
            </div>
            <div>
              <el-image :src="bigImage" style="height: 500px;width: 100%"></el-image>
            </div>
            <div style="padding: 10px 0;background-color: #f5f7fa">
              <el-space>
                <el-image v-for="item in itemDetail.picUrls" @click="bigImage=item"
                          :src="item" style="height: 70px;width: 90px"
                          :class="{active: item===bigImage,'img-list': true}"
                ></el-image>
              </el-space>
            </div>
          </el-card>
          <el-card style="margin-top: 20px">
            <el-descriptions
                title="物品情况"
                direction="vertical"
                :column="2"
                border
            >
              <el-descriptions-item label="分类">{{itemDetail.categoryName}}</el-descriptions-item>
              <el-descriptions-item label="丢失地点">{{itemDetail.location}}</el-descriptions-item>
              <el-descriptions-item label="丢失时间" >{{dateFormat(itemDetail.lostTime)}}</el-descriptions-item>
              <el-descriptions-item label="物品状态" >{{itemDetail.objectStatus}}</el-descriptions-item>
            </el-descriptions>
          </el-card>
          <el-card style="margin-top: 20px">
            <template #header>
              详细情况
            </template>
            {{itemDetail.description}}
          </el-card>
        </el-col>
        <el-col :span="7">
          <el-affix target=".content-m" :offset="80">
            <el-card>
              <el-button v-if="contactType === 'lost'" size="large" type="primary"  @click="centerDialogVisible=true" icon="Phone" style="width: 100%;">
                我捡到了，联系失主
              </el-button>
              <el-button v-if="contactType === 'found'" size="large" type="primary"  @click="centerDialogVisible=true" icon="Phone" style="width: 100%;">
                我是失主，联系拾主
              </el-button>
              <br>
              <el-button size="large" @click="goItemRequest" icon="Share" style="width: 100%;margin-top: 10px">分享此信息</el-button>
            </el-card>
          </el-affix>
          <el-card style="margin-top: 20px">
            <template #header>
              发布人信息
            </template>
            <div>
              <el-space>
                <el-avatar :size="80" :src="publisher.avatar"></el-avatar>
                <div>
                  <el-text tag="b" size="large">{{publisher.nickname}}</el-text>
                </div>
              </el-space>
             <div style="margin-top: 20px">
               <p>发布记录</p>
               <el-space size="large">
                 <el-card style="text-align: center">
                   <el-text>12</el-text>
                   <br>
                   <el-text size="small">招领信息</el-text>
                 </el-card>
                 <el-card style="text-align: center">
                   <el-text>8</el-text>
                   <br>
                   <el-text size="small">成功找回</el-text>
                 </el-card>
                 <el-card style="text-align: center">
                   <el-text>0</el-text>
                   <br>
                   <el-text size="small">投诉记录</el-text>
                 </el-card>
               </el-space>
             </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-dialog
        v-model="centerDialogVisible"
        :title="contactType==='lost'? '联系失主':'联系拾主'"
        width="500"
        align-center
    >
      <div>
        <el-form :model="itemRequestForm" label-width="80px">
          <el-form-item label="联系方式">
            <el-input v-model="itemRequestForm.contactInfo"></el-input>
          </el-form-item>
          <el-form-item label="物品描述">
            <el-input v-model="itemRequestForm.itemDescription"></el-input>
          </el-form-item>
          <el-form-item label="丢失/发现时间">
            <el-date-picker
                v-model="itemRequestForm.lostTime"
                type="datetime"
                placeholder="选择日期时间"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="丢失/发现地点">
            <el-input v-model="itemRequestForm.lostLocation"></el-input>
          </el-form-item>
          <el-form-item label="凭证">
            <el-upload
                v-model:file-list="fileList"
                :action="$fileUpload"
                :headers="$getHeaders"
                :data="{sceneCode:'serve:lost-found'}"
                list-type="picture-card"
                :on-success="handleUpload"
                :on-remove="handleRemove"
            >
              <el-icon>
                <Plus/>
              </el-icon>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary"  @click="submitRequest">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {dateFormat} from '@/utils'
import {reqAddItemRequest, reqGetFoundItemById, reqGetLostItemById} from "@/api/serve/lost";
import {reqGetUserById} from "@/api/front/user";
import {ItemRequestSaveForm} from "@/api/serve/lost/type";

const route = useRoute()
const router = useRouter()
let itemDetail = ref({})
let publisher = ref({})
let bigImage = ref('')
let fileList=ref([])

let getLostItemDetail = async () => {
  if (route.query.type === 'lost') {
    let res = await reqGetLostItemById(route.params.itemId as string)
    itemDetail.value = res.data
  } else if (route.query.type === 'found') {
    let res = await reqGetFoundItemById(route.params.itemId as string)
    itemDetail.value = res.data
  }
  bigImage.value = itemDetail.value.defaultPicture
}

let getPublisherInfo = async () => {
  let res = await reqGetUserById(itemDetail.value.userId)
  publisher.value = res.data
}
/*联系失主/拾主弹窗*/
let centerDialogVisible=ref(false)
let contactType=ref(route.query.type)
let itemRequestForm = reactive<ItemRequestSaveForm>({
  requestType: contactType.value==='lost' ? 0 : 1,//0丢失 1归还
  contactInfo: '',
  itemId: route.params.itemId as string,
  itemDescription: '',
  lostTime: null,
  lostLocation: '',
  proofImages: [],
})


let handleUpload = (response, file, fileList) => {
  itemRequestForm.proofImages = fileList.map(item => item.response.data)
}
let handleRemove = (file, fileList) => {
  itemRequestForm.proofImages = fileList.map(item => item.response.data)
}
let submitRequest = async () => {
  await reqAddItemRequest(itemRequestForm)
  centerDialogVisible.value=false
}

onMounted(async () => {
  await getLostItemDetail()
  await getPublisherInfo()
})
</script>

<style scoped>
hr {
  border: 2px solid #409EFF;
}

.img-list {
  border-radius: 10px;
  border: solid 1px var(--el-border-color);
}

.img-list:hover {
  cursor: pointer;
  border: solid 2px var(--el-color-primary);
}

.active {
  cursor: pointer;
  border: solid 2px var(--el-color-primary);
}
</style>
